//@ts-check

//1000~`10000
let zIndex_default = 1000;  
import { getMinSize } from "../../../rxtools/src/brower/element";

class Mask {
  /**
   * zIndex 层级 默认 1000 每次实例化*10
   * store 仓储
   * popups 弹窗界面的映射关系 {shiftForm :import xxx}
   */
  constructor({
    store,
    popups,
    globalConfig = {},
    verticalCenter=false
  }
  ) {
    this.store = store;
    this.popups = popups;
    this.globalConfig = globalConfig;
    this.isCenter=verticalCenter;
    var _this = this;
     /**
     * 显示弹窗
     * @param {String} name  组件页面对应的名字
     * @param {Object} params  调用参数
     */
    this.show = (name, params)=>{
        var component = _this.popups[name];
        if (!component) {
          throw new Error(`遮罩层显示失败，未找到${name}对应的弹窗，请检查入口实例化popups是否正确`)
        }
        return component instanceof Function ?
          component().then((cpt) => _this.render(cpt.default, params)) :
          _this.render(component, params);
      }
  }
    /**
     * 渲染弹窗到dom
     * @param {Object} component 组件
     * @param {Object} params 参数
     */
    render(component, params) {
      var resolve,
        reject,
        promise = new Promise((res, rej) => {
          resolve = res;
          reject = rej;
        });
      
      var _this=this;
      
      var div = document.createElement('div');
      div.style.position = "fixed";
      div.style.top = '0';
      div.style.left = '0';
      div.style.right = '0';
      div.style.bottom = '0';
      div.style.zIndex =''+ zIndex_default++;
      div.style.backgroundColor = 'rgba(0,0,0,0.5)';
      div.style.overflow = 'auto';
      div.className = 'dialog-fade-to';
      document.body.appendChild(div);

      var el = document.createElement('div')
      div.appendChild(el)
      //@ts-ignore
      var vueClass = Vue.extend(component);

      var vm = new vueClass({
        el,
        store: _this.store,
        ..._this.globalConfig,
        propsData: params,
        mounted(){
          //TODO 绑定关闭事件
          var closeEls=this.$el.querySelectorAll('[mask-close]');
          closeEls.forEach(element => {
            element.addEventListener('click',()=>{
              reject();
              endFn();
            })
          });
          //如果要垂直居中显示
          if(_this.isCenter){
            var node =this.$el.cloneNode(true);
            node.style.display='block';
            node.style.position='relative'
            var height=getMinSize(node).height;
            this.$el.style.top='50%';
            this.$el.style.marginTop='-'+(height/2+45)+'px';
          }
          
        }
      });
      var endFn = function () {
        vm.$destroy();
        div.childNodes[0]["className"] = 'rx-modal popup-test dialog-fade-leave-active';
        div.className = 'dialog-fade-hide';
        setTimeout(function(){
            div.remove();
        },300) 
        zIndex_default--;
      }
      vm.$on('resolve', function (arg) {
        /* promise 只接收一个参数 */
        resolve(arg);
        endFn();
      })
      vm.$on('reject', function (arg) {
        reject(arg);
        endFn();
      });
      window.addEventListener('popstate',()=>{      
        reject('浏览器onpopstate事件，关闭弹窗');
        endFn();
      })
      return promise;
    }
}
// new 
export default Mask